<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="warning" @click="addVarity" style="margin-bottom: 20px">添加分类</el-button>
    <!--列表-->
    <el-table size="small" :data="varityList" highlight-current-row v-loading="loading" border
    max-height="500"
      element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable align="center" prop="id" label="分类编号" width="200">
      </el-table-column>
      <el-table-column sortable align="center" prop="typeName" label="分类昵称" width="200">
      </el-table-column>
      <el-table-column sortable align="center" prop="createTime" label="分类创建时间" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="editvarity(scope.row)">编辑</el-button>
          <el-button size="mini" type="warning" @click="seeGoods(scope.row)">查看关联商品</el-button>
          <el-button size="mini" type="danger" @click="deletevarity(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!-- <Pagination v-bind:child-msg="" @callFather="callFather"></Pagination> -->
    <!-- 编辑界面 -->
    <el-dialog :title="editTitle" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="分类名字" prop="typeName">
          <el-input size="small" v-model="editForm.typeName" auto-complete="off" placeholder="请输入分类名字"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm(editOrAdd ? 'editForm' : 'addForm')">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="varityName" :visible.sync="varityVisible" width="60%">
       <el-table
        :data="varityGoods"
        style="width: 100%"
        max-height="400">
        <el-table-column align="center" prop="goodsName" label="商品昵称" width="150">
        </el-table-column>
        <el-table-column align="center" prop="coverImg" label="商品封面图片" width="150">
          <template slot-scope="scope" v-if="scope.row.coverImg">
            <el-image
              style="width: 100px"
              :src="scope.row.coverImg"
              fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="originalPrice" label="原价(进货价)" width="150">
        </el-table-column>
        <el-table-column sortable align="center" prop="sellPrice" label="售卖价（元）" width="150">
        </el-table-column>
        <el-table-column align="center" prop="countryOfOrigin" label="原产地" width="150">
        </el-table-column>
        <el-table-column align="center" prop="shippingAddress" label="发货地" width="150">
        </el-table-column>
        <el-table-column align="center" prop="isSell" label="商品状态" width="150">
          <template slot-scope="scope">
            {{scope.row.isSell ? '已上架' : '已下架'}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'Varity',
  data() {
    return {
      varityGoods: [], // 关联商品列表
      varityName: '', // 关联弹起框标题
      varityVisible: false, // 关联弹起框状态
      editOrAdd: true, // 编辑 / 新增 => true / false
      varityList: [], //分类列表
      loading: false, //是显示加载
      editFormVisible: false, // 编辑框是否弹出
      editTitle: '编辑分类',
      editForm: {
        id: '',
        typeName: ''
      },
      // rules表单验证
      rules: {
        typeName: [
          { required: true, message: '请输入分类名字', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.getVarityList()
  },
  methods: {
    /**
     * 添加分类
     */
    addVarity () {
      this.editOrAdd = false
      this.editFormVisible = true
      this.editTitle = "添加分类"
    },
    /**
     * 编辑弹框保存分类修改信息
     */
    submitForm (msg) {
      if (msg === 'editForm') {
        this.$api.varity.discVarity(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getVarityList()
          }
        }).catch(err => this.editFormVisible = false)
      } else {
        delete this.editForm.id
        this.$api.varity.addVarity(this.editForm).then(res => {
          if (res.code === 200) {
            this.editFormVisible = false
            this.getVarityList()
          }
        }).catch(err => this.editFormVisible = false)
      }
    },
    /**
     * 获取分类列表
     */
    getVarityList() {
      this.loading = true
      this.$api.varity.getVarityList().then(res => {
        if (res.code === 200) {
          this.varityList = res.data
          this.loading = false
        }
      }).catch(err => this.loading = false)
    },
    /**
     * 关闭编辑、增加弹出框
     */
    closeDialog() {
      this.editFormVisible = false
    },
    /**
     * 查看该分类下的关联商品
     */
    seeGoods (varity) {
      let query = {
        typeId: varity.id
      }
      this.$api.varity.searchShopByVarity(query).then(res => {
        if (res.code === 200) {
          this.varityGoods = res.data.records
          this.varityVisible = true
          this.varityName = varity.typeName
        }
      })
    },
    /**
     * 编辑分类
     */
    editvarity (varity) {
      this.editOrAdd = true
      this.editFormVisible = true
      this.editTitle = "编辑分类"
      this.editForm.id = varity.id
      this.editForm.typeName = varity.typeName
    },
    /**
     * 增加分类
     */
    addvarity () {
      this.editOrAdd = false
      this.editFormVisible = true
      this.editTitle = "添加分类"
      this.editForm.typeName = ''
    },
    /**
     * 删除分类
     */
    deletevarity (index, varity) {
      this.$api.varity.deleteVarity({id:varity.id}).then(res => {
        if (res.code === 200) {
          this.getVarityList()
        }
      })
    }
  }
}
</script>

<style>
.varity-search {
  margin-top: 20px;
}
.varityRole {
  width: 100%;
}
</style>

 
 